<template>
  <div class="song-music">
    <div class="music-song clearfix">
      <div class="music-left">
        <img :src="songplay.song_pic" alt="">
      </div>
      <div class="music-details">
          <p class="music-name">{{songplay.song_title }}</p>
          <span class="music-play">{{ songplay.play_num + "播放"}}</span>
          <i class="icon iconfont">&#xe60a;</i>
          <p class="author">{{ "作者：" + songplay.song_author}}</p>
          <i :class="{'hid':flag2}" @click="player" class="icon iconfont play">&#xe60c;
            <audio ref="player" :src="songplay.song_source" autobuffer autoloop></audio>
          </i>
          <i :class="{'hid':flag1}" @click="player" class="icon iconfont play">&#xe6a9;</i>
      </div>
      <p class="music-title clearfix">{{songplay.song_intro_cont}}</p>
    </div>
    </div>
</template>
<script>
export default {
  name: 'SongMusic',
  data() {
    return {
      /*song_title :"",
      play_num:"",
      song_author:"",
      song_intro_cont:""*/
      flag1:true,
      flag2:false
    }
  },
  components: {

  },
  props:{
    songplay:{
      type:Object,
      default:function(){
        return {};
      }
    }
  },
  methods:{
    player(event){
      console.log(222)
        this.flag1 = !this.flag1;
        this.flag2 = !this.flag2
        // 判断是否按钮处于暂停如果处于暂停就播放
        if(this.flag1===true){
          this.$refs.player.pause();
        }else{
          this.$refs.player.play();
        }
    }
  },
  updated(){
    this.$refs.player;
  }
}

</script>
<style lang="css" scoped>
.hid{
  display: none;
}
.song-music {
  width: 100%;
  background-color: #f5f5f5;
  margin-bottom: 0.2rem;
}
.music-song{
    background-color: #fff; 
    font-size: 0.16rem;
}
.music-song >div{
    float: left;
}
.music-left{
  padding: 0.2rem 0;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
}
.music-left img {
  width: 1.5rem;
  height: 1.5rem;
}
.music-details {
  width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  padding: 0.2rem 0;
}
.music-details .music-name{

  font-size: 0.2rem;
  padding-bottom: 0.05rem;
}
.music-details .music-play{
  color: #858585;
}
.music-details i{
  font-size: 0.22rem;
}
.music-details .author{
  color: #4DBFFB;
  padding-top:0.05rem;
  padding-bottom: 0.22rem;
  letter-spacing: 0.03rem;
}
.music-details .play{
  font-size: 0.32rem;
}
.music-title{
  padding: 0 0.2rem;
  color: #898989;
  padding-bottom: 0.2rem;
  letter-spacing: 0.02rem;
}
</style>
